<!--
 * @Description: 添加,编辑行业弹窗组件
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-12-07 14:06:54
 * @LastEditors: 付小清
 * @LastEditTime: 2020-12-16 10:36:46
-->

<template>
  <el-dialog
    width="570px"
    :title="_formData.genre == 'add' ? '添加行业' : '编辑行业'"
    :visible.sync="_isShow"
    :close-on-click-modal="false"
    @close="closeModal"
  >
    <el-form
      ref="refForm"
      style="padding-right: 40px"
      :model="_formData"
      label-width="120px"
      :validate-on-rule-change="false"
    >
      <el-form-item
        prop="industryName"
        :rules="formVerify.industryName"
        label="行业名称"
      >
        <el-input v-model="formData.industryName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="上级行业">
        <el-cascader
          v-if="_isShow"
          v-model="formData.parentId"
          style="width: 100%"
          clearable
          :props="options"
          :disabled="_formData.genre == 'edit' ? true : false"
          node-key="industryName"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="formData.sortOrder" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      <el-button @click="_isShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>

// 接口
import { industryUpdateEdit, industryTree } from '@/api/basics'
export default {
  props: {
    // 弹窗显示
    show: {
      type: Boolean,
      default: false
    },
    // 表单数据
    formData: {
      type: Object,
      default: () => {
        return {
          genre: 'add', // add或者edit
          industryId: '',
          industryName: '',
          levelType: 0,
          parentId: '',
          sortOrder: 0
        }
      }
    }
  },
  data() {
    return {
      formVerify: {
        industryName: [
          { required: true, message: '请输入行业名称', trigger: 'blur' }
        ]
      },
      options: {
        lazy: true,
        checkStrictly: true,
        async lazyLoad(node, resolve) {
          let code = ''
          if (node.level === 0) {
            code = '0'
          } else {
          // 其余节点处理
            code = node.data.value
          }
          try {
            const { data } = await industryTree({ sup: code })
            const list = []
            data.filter((item) => {
              // 最后不显示展开节点
              // if (item.industryId.length > 6) {
              //   list.push({
              //     value: item.industryId,
              //     label: item.industryName,
              //     leaf: true
              //   })
              // } else {
              //   list.push({
              //     value: item.industryId,
              //     label: item.industryName
              //   })
              // }
              list.push({
                value: item.industryId,
                label: item.industryName
              })
            })
            resolve(list)
          } catch (e) {
            console.log(e)
          }
        }
      }
    }
  },
  computed: {
    _isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    },
    _formData: {
      get() {
        return this.formData
      },
      set(val) {
        this.$emit('update:formData', val)
      }
    }
  },
  methods: {
    handleChange(data) {
      this._formData.parentId = data
    },
    closeModal() {
      this.$refs.refForm.resetFields()
    },
    onSubmit() {
      try {
        // 验证表单是否填写完善
        this.$refs.refForm.validate(async(valid) => {
          if (valid) {
            const formData = this.formData
            // eslint-disable-next-line valid-typeof
            if (typeof (this.formData.parentId) === 'object' && this.formData.parentId.length) {
              formData.levelType = this.formData.parentId.length + 1
              formData.parentId = formData.parentId[formData.parentId.length - 1]
            } else {
              formData.levelType = 1
              formData.parentId = '0'
            }
            // 提交请求
            const { data, code } = await industryUpdateEdit(formData)
            // 成功处理
            if (code === 0 && data === true) {
              if (this.formData.genre === 'add') {
                this.$message({ message: '添加行业成功', type: 'success' })
              } else {
                this.$message({ message: '修改行业成功', type: 'success' })
              }
              this._isShow = false // 关闭弹窗
              this.$emit('refresh', formData.parentId) // 刷新列表数据
            } else {
              this.$message({ message: data, type: 'error' })
            }
          } else {
            console.log('error submit!!')
            // this.$emit('refresh') // 刷新列表数据
          }
        })
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
